<template>
  <div class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	
	 <div class="order-settlement-page">
	 		<div>
	 			<!--地址-->
	 			<div class="order-block link-bg" style="padding:0" @click="toAddressList">
					<u-loading-icon text="地址获取中..." textSize="24" vertical v-if="spinShowAddressInfo" style="text-align: center;padding:20px"></u-loading-icon>
	 				<div v-else class="order-adr" style="padding:12px 16px">
	 					<div class="img"><img src="https://pic.moresu.com/FskOos8zWjFXelWQ5AsbUqx7Ayz7" class="img-img"/></div>
	 					<!--有地址-->
	 					<div class="adr-info" v-if="addressInfo.addressId">
	 						<div class="adr-top"><span class="name">{{ addressInfo.receiveName }}</span><span class="phone">{{ addressInfo.mobile }}</span></div>
	 						<div class="adr-bottom">{{ addressInfo.areaInfo }}{{addressInfo.addressInfo}}</div>
	 					</div>
	 					<!--没有地址-->
	 					<div class="text" v-else>暂无地址，请添加地址</div>
	 					<div class="jt"><u-icon name="arrow-right"></u-icon></div>
	 				</div>
	 			</div>
	 
	 			<!--商品-->
	 			<div class="order-block">
	 				<div class="goods-info-block" 
					v-for="(item,index) in info.goodsList" 
					:key="index"
					style="-webkit-box-align: center;-webkit-align-items: center;-moz-align-items: center;-ms-flex-align: center;-o-align-items: center;align-items: center;">
	 					<div class="goods-img" >
	 						<img :src="item.goodsImage" mode="aspectFit"/>
	 					</div>
	 					<div class="gooods-info" >
	 						<div class="goods-name">{{item.goodsName}}</div>
	 						<div class="goods-price-num">
	 							<div class="goods-price">
	 								<span>￥{{ item.goodsPrice }}</span><span> 积分</span>
	 							</div>
	 							<div class="goods-num">X{{item.goodsNum}}</div>
	 						</div>
	 					</div>
	 				</div>
	 
	 			</div>
	 
	 			<!--订单选项-->
	 			<div class="order-block" style="padding:0">
					<view style="padding:16px">
						 <view class="u-slot-title" style="height:30px;">订单备注</view>
						 <textarea v-model="orderRemark" placeholder="买家留言"  class="u-slot-value" style="font-size:14px;height:60px"></textarea>
					</view>
	 			</div>
	 
	 
	 			<!--合计-->
	 			<div class="order-settlement-bottom">
	 				<div class="bottom-left">
	 					合计：
	 					<span class="price">{{info.orderAmount}} 积分</span><span class="sub-title"></span>
	 				</div>
	 				<div class="bottom-right">
	 					<u-button
	 							@click="submitOrder"
	 							color="linear-gradient(to right, #ff4600, #fd7505)"
	 							:customStyle="{'width':'100px','border-radius':'20px','line-height': '35px','height':'35px'}"
	 							:loading="btnLoading">提交订单</u-button>
	 				</div>
	 			</div>
	 		</div>
	 
	 	</div>
  
	
  </div>
</template>

<script>
  import{integralOrderConfirm,integralExchange} from '@/config/points.js'
  import{getAddressInfo,pageSeo} from '@/config/api.js'
  import store from '@/store';
  export default {
    components: {
      

    },
    data() {
      return {
			currentAddressId:'',//当前地址Id
			info:{}, //页面数据

			orderRemark:'',//备注
			btnLoading:false,
			payAmount:0,//订单金额

			spinShow:true,
			spinShowAddressInfo:false,
			addressInfo:{},
			showRight:false,
			goodsId:'',
			goodsNum:'',
			buyType:''
      }
    },

	async onLoad(options) {
    	await this.$onLaunched;	
        this.spinShow = true;
		this.goodsId = options.goodsId;
		this.goodsNum = options.goodsNum;
		this.buyType =options.buyType;		   
    },
	
	async onShow() {
		await this.$onLaunched;	
		this.getInfo()
	    // #ifdef H5
		pageSeo({pageType: 'indexPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
	    // #endif	
	},

	
    methods: {
		
		getInfo(){
			let data = {};
			data.goodsList = [];
			let goodsIds = this.goodsId.split(",");
			let goodsNums = this.goodsNum.split(",");
			goodsIds.forEach((el,index)=>{
				data.goodsList.push({goodsId:el,goodsNum:goodsNums[index]})
			})
			integralOrderConfirm(data)
				.then((res)=>{
					this.spinShow = false;
					this.info = res;
					//选择地址页过来
					uni.getStorage({
					    key:'selectAddress',
					    success: (e) => {
					        this.addressId = e.data.addressId;
							this.currentAddressId = e.data.addressId;
					        uni.removeStorage({
					            key:'selectAddress'
					        })
							if(this.currentAddressId){
								this.getAddressInfo(this.currentAddressId);
							}
					    },
						fail: (e) =>  {
							this.currentAddressId = this.info.addressId ? this.info.addressId : null;
							if(this.currentAddressId){
								this.getAddressInfo(this.currentAddressId);
							}
						  }
					})
					
				}).catch(()=>{
				this.spinShow = false;
			});
		},
		
		//去地址列表页
		toAddressList(){
			uni.navigateTo({
			    url:"/pagesUser/user/myAddressList?type=select"
			})
		},
		//获取指定地址详情
		getAddressInfo(buyerAddressId){
			this.spinShowAddressInfo = true;
			getAddressInfo({addressId :buyerAddressId}).then((res)=>{
				this.addressInfo = res;
				this.spinShowAddressInfo = false;
			}).catch(()=>{
				this.spinShowAddressInfo = false;
			})
		},

		//提交订单
		submitOrder(){
			let data = {};
			data.addressId = this.currentAddressId;
			data.orderRemark = this.orderRemark;
			data.goodsList = this.info.goodsList;
			data.buyType = this.buyType;
			this.btnLoading = true;
			integralExchange(data).then((res)=>{
				this.btnLoading = false;
				uni.navigateTo({
				    url:'/pagesIntegral/intergralOrderInfo?orderId=' + res.orderId
				})
			}).catch(()=>{
				this.btnLoading = false
			})
		},
		
	},
	
	
	

  }
</script>


<style lang="scss">
@import '@/style/common.scss';
//订单提交
.order-settlement-page{  
    padding-bottom:66px;
    .order-block{
      padding:12px 16px;
      background: #fff;
      margin-bottom:$marginSpace;
    }
    .order-adr{
      background: url("https://pic.moresu.com/FtS7D_4jRGJlyhIcj_pZVZkf49NI") repeat-x bottom left;
      background-size: 80%;
	   @include flexbox(flex-start,center);
      min-height:70px;
      .img{
        width:30px;
        .img-img{
          width:100%;
		  height:30px;
        }
      }
      .text{
        font-size:$m-font;
        color:$g-font-color;
        width:calc(100% - 60px);
        padding-left:20px;
        line-height: 30px;
      }
      .jt{
        font-size:18px;
        width:30px;
        text-align: right;
      }
      .adr-info{
        font-size:$m-font;
        color:$font-color;
        width:calc(100% - 60px);
        padding-left:20px;
        .adr-top{
          line-height: 22px;
          .name{
            font-weight: bold;
            padding-right:10px
          }
        }
      }
    }
    .goods-info-block{
		 @include flexbox(flex-start,flex-start);
        .goods-img{
          width:85px;
          height:85px;
          img{
            width:100%;
            height:100%;
            object-fit: contain;
          }
        }
        .gooods-info{
          width:calc(100% - 85px);
          padding-left:16px;
          .goods-name{
            font-size:$m-font;
            color:$font-color;
             @include textoverflow(2);
          }
          .goods-attr{
            min-width:60px;
            height:20px;
            line-height: 20px;
            border-radius: 10px;
            background: #efefef;
            font-size:$s-font;
            color:$g-font-color;
            display: inline-block;
            text-align: center;
            margin-top:5px;
            padding:0 8px;
          }
          .goods-price-num{
              margin-top:5px;
			  @include flexbox(space-between,center);
              .goods-price{
                color:$theme-color;
                font-size:$b-font;
                span{
                  font-size:$s-font;
                }
              }
              .goods-num{
                font-size:$s-font;
                color:$g-font-color;
              }

          }
        }
    }
    .order-settlement-bottom{
      position: fixed;
      bottom:0;
      width:100%;
      background: #fff;
      padding:0 16px;
      height:50px;
	   @include flexbox(space-between,center);
      .bottom-left{
        font-size:$m-font;
        .price{
          color:$theme-color;
        }
        .sub-title{
          color:$g-font-color;
          font-size:$s-font
        }
      }
    }

  .coupon-item{
    cursor: pointer;
    width:324px;
    height:86px;
    background: url("https://pic.moresu.com/FtB-RnvtFtrWkIXjCtT88EEX2vPW") no-repeat;
    background-size: contain;
    color:#fff;
    margin:0 auto;
    overflow: hidden;
    margin-bottom:10px;
    .left{
      width:238px;
      padding:5px 20px;
      padding-right:15px;
      .text-top{
		  @include flexbox(flex-start,flex-end);
        .text-left{
          .jian{
            font-size:16px;
            display: inline-block;
            vertical-align: text-bottom;
          }
          .price{
            font-size:48px;
            font-family: "Impact";
            display: inline-block;
            line-height: 50px;
          }
        }
        .text-right{
          padding-left:5px;
          .mang{
            font-size:14px;
          }
          .unit{
            font-size:20px;
            line-height: 36px;
            font-weight: bold;
          }
        }


      }
      .text-bottom{
        margin-top:3px;
        background: #e3a004;
        font-size:10px;
        line-height: 18px;
        text-align: center;
        height:18px;
        padding-top:1px;
      }
    }
  }
  .coupon-item.over{
    background: url("https://pic.moresu.com/FpdVftOJA5hcEZb1JAQXYZyWaULp") no-repeat;
    background-size: contain;
    color:#929292;
    .text-bottom {
      background: #929292;
      color:#d3c9c9;
    }
  }

}

</style>


    
    
